<template>
  <div>
    <a-modal
      title="建议详情"
      :width="600"
      :visible="visible"
      :footer="null"
      @cancel="handleCancel"
    >
      <div class="content">
        <div class="mg-b">姓名：{{ details.childName }}</div>
        <div class="mg-b">时间：{{ details.createdTime }}</div>
        <div class="mg-b">内容：{{ details.content }}</div>
        <div class="flex">
          <div class="mg-b">图片：</div>
          <div class="imgBox">
            <img
              class="img-item"
              v-for="(item, index) in imgList"
              :key="index"
              :src="item"
            >
          </div>
        </div>
        <div class="flex">
          <div class="mg-b">回复：</div>
          <a-input
            v-model="value"
            placeholder="请输入内容"
            style="width: 85%"
          />
        </div>
        <div class="btn">
          <a-button @click="reply">回复</a-button>
        </div>
        <a-divider />
        <div
          v-for="item in replyList"
          :key="item.id"
          class="replyContent"
        >
          <div class="flexReply">
            <div>{{ item.replyContent }}</div>
            <a-button @click="deleteReply(item.id)">删除</a-button>
          </div>
          <div>{{ item.replyUserName }} {{ item.createdTime }}</div>
          <a-divider />
        </div>
      </div>
    </a-modal>
  </div>
</template>
  
  <script>
import { getPHotline, photlineReply, deleteReply } from '@/api/modular/garden/principalhotline'
export default {
  data() {
    return {
      visible: false,
      details: {},
      imgList: [],
      replyList: [],
      imgTitle: '',
      id: undefined,
      value: '',
    }
  },
  mounted() {
    this.imgTitle = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/previewImg?id='
  },
  // created:{

  // }
  methods: {
    check(record) {
      this.id = record.id
      this.visible = true
      this.getPHotlineRefrash()
    },
    getPHotlineRefrash() {
      getPHotline(this.id).then((res) => {
        const { code, data } = res
        if (code == 200) {
          this.details = data
          this.replyList = data.replyList
          let _imgs = data.images
          this.imgList = _imgs.map((item) => {
            return this.imgTitle + item.filedId
          })
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    reply() {
      if(!this.value){
        return
      }
      photlineReply({
        principalHotlineId: this.id,
        replyContent: this.value,
      }).then((res) => {
        if (res.success) {
          this.$message.success('回复成功')
          this.getPHotlineRefrash()
          this.value = ''
        } else {
          this.$message.error('回复失败：' + res.message)
        }
      })
    },
    deleteReply(id) {
      deleteReply({ id: id }).then((res) => {
        const { code, data } = res
        if (code == 200) {
          this.$message.success('删除成功')
          this.getPHotlineRefrash()
        } else {
          this.$message.error('删除失败：' + res.message)
        }
      })
    },
  },
}
</script>
  
  <style scoped>
.content {
  font-size: 15px;
}
.mg-b {
  margin-bottom: 10px;
}
.mg-l {
  margin-left: 30px;
}

.img-item {
  width: 100px;
  padding-top: 3px;
}
.flex {
  display: flex;
  margin-bottom: 20px;
}
.btn {
  margin-left: 45px;
}
.replyContent {
  margin: 20px 0;
}
.flexReply {
  display: flex;
  justify-content: space-between;
}
</style>